/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Button, Radio, Select, Grid, Card, Message } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';

const { Row, Col } = Grid;
const { Group: RadioGroup } = Radio;

export default class BaseSetting extends Component {
  state = {
    value: {},
  };

  validateAllFormField = () => {
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        return;
      }
      console.log(values);
      Message.success('提交成功');
    });
  };

  render() {
    let { value } = this.state
    return (
      <IceContainer>
        <IceFormBinderWrapper value={this.state.value} onChange={(value)=>this.setState({ value })} ref="form">
          <div style={styles.formContent}>
            <h2 style={styles.formTitle}>制作广告</h2>

            <h3 style={styles.formTitle}>设置广告位置</h3>
            <Row style={styles.formItem}>
              <Col l="3" style={styles.label}>
                地理位置：
              </Col>
              <Col l="5">
                <IceFormBinder name="gender" required message="必填">
                  <Select style={styles.inputItem}>
                    <Select.Option value="all">所有国家和地区</Select.Option>
                    <Select.Option value="USA">美国</Select.Option>
                    <Select.Option value="CNY">中国</Select.Option>
                  </Select>
                </IceFormBinder>
                <IceFormError name="gender" />
              </Col>
            </Row>
            <h3 style={styles.formTitle}>制作广告</h3>
            <div style={styles.line}>
              <div style={styles.left}>
                <Row style={styles.formItem}>
                  <Col l="5" style={styles.label}>
                    语言：
                  </Col>
                  <Col l="8">
                    <IceFormBinder name="language" required message="必填">
                      <Select style={styles.inputItem}>
                        <Select.Option value="china">汉语</Select.Option>
                        <Select.Option value="english">英语</Select.Option>
                      </Select>
                    </IceFormBinder>
                    <IceFormError name="language" />
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col l="5" style={styles.label}>
                  您需要推广的网站链接：
                  </Col>
                  <Col l="8">
                    <IceFormBinder name="weburl" required max={50} message="必填">
                      <Input style={styles.inputItem} trim maxLength={50} placeholder="请输入需要推广的网站链接"/>
                    </IceFormBinder>
                    <IceFormError name="weburl" />
                  </Col>
                  <Col l="6" style={styles.label}>
                  如果您还没有网站联系我们帮您建站
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col l="5" style={styles.label}>
                    标题1：
                  </Col>
                  <Col l="8">
                    <IceFormBinder name="title1" required max={10} message="必填">
                      <Input style={styles.inputItem} trim maxLength={10} placeholder="标题1" />
                    </IceFormBinder>
                    <IceFormError name="title1" />
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col l="5" style={styles.label}>
                    标题2：
                  </Col>
                  <Col l="8">
                    <IceFormBinder name="title2" required max={10} message="必填">
                      <Input style={styles.inputItem} trim maxLength={10} placeholder="标题2" />
                    </IceFormBinder>
                    <IceFormError name="title2" />
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col l="5" style={styles.label}>
                    广告描数的内容第1行：
                  </Col>
                  <Col l="8">
                    <IceFormBinder name="content1" required max={100}>
                      <Input style={styles.inputItem} trim maxLength={100} placeholder="广告描数的内容第1行" />
                    </IceFormBinder>
                    <IceFormError name="content1" />
                  </Col>
                </Row>
                <Row style={styles.formItem}>
                  <Col l="5" style={styles.label}>
                    广告描数的内容第2行：
                  </Col>
                  <Col l="8">
                    <IceFormBinder name="content2" max={100} >
                      <Input style={styles.inputItem} trim maxLength={100} placeholder="广告描数的内容第2行"/>
                    </IceFormBinder>
                    <IceFormError name="content2" />
                  </Col>
                  
                </Row>
              </div>
              <div style={styles.right}>
                <Card title="广告预览效果" showHeadDivider contentHeight="auto" style={{width : '350px', height:'fit-content'}}>
                    <div className="custom-content">
                      <div style={{marginTop:5,display:'flex',fontSize:'22px',color:'#4169E1'}}>
                        <div style={{marginRight:8,whiteSpace:'nowrap'}}>{ value.title1 || '标题1' }</div> 
                          | 
                        <div style={{marginLeft:8,whiteSpace:'nowrap'}}>{ value.title2 || '标题2' }</div>
                      </div>
                      <div style={{display:'flex',marginTop:3,color:'#009900'}}>
                        <label style={{border:'solid',borderWidth:1}}>{ value.language == 'english' ? 'Ad' : '广告' }</label>
                        <div style={{marginLeft:5,whiteSpace:'nowrap',width:'200px',textOverflow:'ellipsis',overflow:'hidden'}}>
                          { value.weburl || 'http://www.google.com' }
                        </div>
                      </div>
                      <div style={{marginTop:5}}> { value.content1 || '广告内容描述第一行' } </div>
                      <div> { value.content2 || '广告内容描述第二行' } </div>
                    </div>
                </Card>
              </div>
            </div>
          </div>
        </IceFormBinderWrapper>

        <Row style={{ marginTop: 20 }}>
          <Col offset="3">
            <Button
              type="primary"
              style={{ width: 100 }}
              onClick={this.validateAllFormField}
            >
              提 交
            </Button>
          </Col>
        </Row>
      </IceContainer>
    );
  }
}

const styles = {
  label: {
    textAlign: 'right',
  },
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    alignItems: 'center',
    marginBottom: 25,
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
    color: '#333',
  },
  inputItem: {
    width: '100%',
  },
  line : {
    display: 'flex'
  },
  left : {
    width : '60%',
    borderRight: 'solid',
    borderWidth: '1px',
    borderColor: '#ccc'
  },
  right : {
    width : '40%',
    display: 'flex',
    justifyContent : 'center'
  }
};
